<script setup lang="ts">
import { ref } from 'vue';
import type { SelectProps } from 'ant-design-vue';

// 语言下拉
const language = ref('ja');
const languageOptions1 = ref<SelectProps['options']>([
    {
        value: 'ja',
        label: '日本語'
    },
    {
        value: 'zh',
        label: '中文'
    }
]);

// 翻译弹窗
const open = ref<boolean>(false);
const showModal = () => {
    open.value = true;
};
const onCancel = () => {
    onClear();
};
const onClear = () => {
    value1.value = '';
    value2.value = '';
};

const value1 = ref('');
const value2 = ref('');
const handleFanyi = () => {
    value2.value = value1.value;
};

const isDropdownVisible = ref(false);
const toggleDropdown = () => {
    isDropdownVisible.value = !isDropdownVisible.value;
};
const historical_data = ref([
    '雪王',
    '瑞幸',
    '星巴克',
    '必胜客',
    '肯德基',
    '咖啡 不要星巴克 不要瑞幸 不要雪王',
    '香辣火锅',
    '香酥炸鸡腿',
    '自助小火锅',
    '螺蛳粉'
]);
const recommend_data = ref([
    { id: 1, title: '分类1', data: ['雪王', '瑞幸', '星巴克'] },
    { id: 2, title: '分类2', data: ['必胜客', '肯德基'] },
    { id: 3, title: '分类3', data: ['香辣火锅', '香酥炸鸡腿', '自助小火锅', '螺蛳粉'] }
]);
</script>

<template>
    <div class="header flex w-full shrink-0 items-center">
        <img class="header-logo block object-contain" src="/images/logo.png" alt="Logo" />
        <span class="header-seat bg-[#302F2F] text-[#E6E6E6]">10番テーブル</span>
        <div class="header-search flex items-center">
            <a-input placeholder="何を食べたいか教えてください">
                <template #prefix>
                    <div class="mr-1.5">
                        <i class="fantec_font ft_SearchOutlined"></i>
                    </div>
                </template>
                <template #suffix>
                    <div class="header-search-suffix flex items-center justify-center" @click="showModal">
                        <i class="fantec_font ft_AudioFilled"></i>
                    </div>
                    <a-dropdown v-model:open="isDropdownVisible" placement="bottomRight" trigger="click" destroyPopupOnHide>
                        <div class="header-search-suffix flex items-center justify-center" @click="toggleDropdown">
                            <i class="fantec_font header-filter ft_FilterOutlined"></i>
                        </div>
                        <template #overlay>
                            <div class="border-gradient relative w-[670px] translate-x-3 translate-y-5 rounded-3xl p-0.5">
                                <div class="w-full rounded-3xl bg-[#353335] py-5 backdrop-blur-2xl">
                                    <div class="max-h-[500px] w-full overflow-y-auto px-6">
                                        <div class="flex flex-wrap items-center gap-3">
                                            <span
                                                v-for="(i, index) in historical_data"
                                                :key="index"
                                                class="inline-block h-8 max-w-[200px] truncate rounded-2xl bg-[#565656] px-5 py-1.5 text-sm leading-5"
                                            >
                                                {{ i }}
                                            </span>
                                        </div>
                                        <template v-for="item in recommend_data" :key="item.id">
                                            <p class="!mt-5 !mb-2.5">{{ item.title }}</p>
                                            <div class="flex flex-wrap items-center gap-3">
                                                <span
                                                    v-for="(i, index) in item.data"
                                                    :key="index"
                                                    class="inline-block h-8 max-w-[200px] truncate rounded-2xl bg-[#565656] px-5 py-1.5 text-sm leading-5"
                                                >
                                                    {{ i }}
                                                </span>
                                            </div>
                                        </template>
                                    </div>
                                    <div class="mt-5 flex items-center justify-end gap-2 px-6">
                                        <button class="filter-btn" @click="toggleDropdown">クリア</button>
                                        <button class="filter-btn btn-bg-gradient" @click="toggleDropdown">検索</button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </a-dropdown>
                </template>
            </a-input>
        </div>
        <a-dropdown placement="bottomRight" trigger="click" destroyPopupOnHide>
            <div class="header-serve ml-3 flex items-center justify-center rounded-full bg-[#302F2F]">
                <i class="fantec_font ft_BellFilled"></i>
            </div>
            <template #overlay>
                <a-menu>
                    <a-menu-item class="header-serve-list bg-[#302F2F]">
                        <img src="/images/ServeIcon1.png" alt="serve" />
                        <span>お茶を入れる</span>
                    </a-menu-item>
                    <a-menu-item class="header-serve-list bg-[#302F2F]">
                        <img src="/images/ServeIcon2.png" alt="serve" />
                        <span>食器を追加する</span>
                    </a-menu-item>
                    <a-menu-item class="header-serve-list bg-[#302F2F]">
                        <img src="/images/ServeIcon3.png" alt="serve" />
                        <span>ナンバープレートの交換</span>
                    </a-menu-item>
                    <a-menu-item class="header-serve-list bg-[#302F2F]">
                        <img src="/images/ServeIcon4.png" alt="serve" />
                        <span>ウェイターを呼ぶ</span>
                    </a-menu-item>
                </a-menu>
            </template>
        </a-dropdown>
        <a-select class="header-language !ml-3" v-model:value="language" :options="languageOptions1">
            <template #suffixIcon>
                <i class="fantec_font header-icon-down ft_CaretDownOutlined"></i>
            </template>
        </a-select>
    </div>

    <!-- 翻译弹窗 -->
    <a-modal
        v-model:open="open"
        :footer="null"
        :closable="false"
        :width="518"
        destroyOnClose
        style="top: 238px"
        :bodyStyle="{ padding: '20px' }"
        @cancel="onCancel"
    >
        <div class="audio-wrap audio-mb-22 flex flex-col items-center">
            <p class="audio-wrap-title w-full text-left">日本語</p>
            <div class="relative w-full">
                <a-textarea class="flex-1 bg-transparent" v-model:value="value1" :auto-size="{ minRows: 8, maxRows: 8 }" />
                <span class="absolute right-2 bottom-2 z-10 text-[#7E7E7E]" :class="{ 'hidden h-0 w-0': !value1 }" @click="onClear">
                    <i class="fantec_font ft_CloseCircleFill"></i>
                </span>
            </div>
            <button class="audio-btn" :class="{ 'audio-btn-active': !!value1 }" @click="handleFanyi" :disabled="!value1">
                <i class="fantec_font ft_SearchOutlined"></i>
                <span>検索</span>
            </button>
        </div>
        <div class="audio-wrap flex flex-col items-center">
            <p class="audio-wrap-title w-full text-left">中文 (简体)</p>
            <div class="audio-fanyi w-full">{{ value2 }}</div>
        </div>
        <div class="mt-6 flex items-center gap-8 px-3">
            <button class="flex-1 rounded-xl bg-[#666] !p-3.5">日本語</button>
            <svg width="42" height="41" viewBox="0 0 42 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M29.5248 17.7212H5.95605V21.0643H29.5248L24.343 26.246L26.6832 28.5862L35.8767 19.3927L26.8504 10.1992L24.5102 12.5394L29.5248 17.7212Z"
                    fill="#ADADAD"
                />
            </svg>
            <a-dropdown placement="bottomRight" trigger="click" destroyPopupOnHide>
                <button class="flex-1 rounded-xl bg-[#666] !p-3.5">中文 (简体)</button>
                <template #overlay>
                    <a-menu>
                        <a-menu-item class="!mb-1 bg-[#302F2F]">
                            <span>中文 (简体)</span>
                        </a-menu-item>
                        <a-menu-item class="!mb-1 bg-[#302F2F]">
                            <span>中文 (繁体)</span>
                        </a-menu-item>
                        <a-menu-item class="!mb-1 bg-[#302F2F]">
                            <span>英语</span>
                        </a-menu-item>
                        <a-menu-item class="bg-[#302F2F]">
                            <span>法语</span>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
        <div class="mt-4 mb-3 flex items-center justify-center">
            <a-button class="!h-16 !w-16 !p-0 shadow-none" type="primary" danger shape="circle">
                <template #icon>
                    <!-- <i class="fantec_font ft_AudioFilled !text-3xl"></i> -->
                    <i class="fantec_font ft_Stop !text-3xl"></i>
                </template>
            </a-button>
        </div>
    </a-modal>
</template>

<style lang="scss" scoped>
.header {
    height: calc(var(--scale) * 96px);
    padding: 0 calc(var(--scale) * 16px);
    margin-bottom: calc(var(--scale) * 4px);

    .header-logo {
        width: calc(var(--scale) * 100px);
        height: calc(var(--scale) * 56px);
        margin-left: calc(var(--scale) * 12px);
    }

    .header-seat {
        height: 34px;
        backdrop-filter: blur(15px);
        border-radius: 10px;
        font-size: 16px;
        line-height: 22px;
        padding: 6px 10px;
        margin: 0 auto 0 68px;
    }

    .header-search {
        width: 670px;
        height: 34px;
        backdrop-filter: blur(15px);
        background-color: #302f2f;
        border: 1px solid #302f2f;
        border-radius: 10px;

        .header-search-suffix {
            width: 18px;
            height: 18px;

            .header-filter {
                font-size: 14px;
            }
        }
    }

    .header-serve {
        width: 34px;
        height: 34px;
        backdrop-filter: blur(15px);

        i {
            font-size: 18px;
        }
    }

    .header-language {
        width: 116px;

        .header-icon-down {
            font-size: 8px;
            color: #e6e6e6;
        }
    }
}

.border-gradient {
    background:
        linear-gradient(93.17deg, rgba(255, 255, 255, 0.3) 0.92%, rgba(50, 53, 58, 0.3) 45.7%, rgba(6, 19, 45, 0.3) 95.71%),
        linear-gradient(93.17deg, rgba(6, 19, 45, 0) 0.92%, rgba(255, 255, 255, 0.3) 100%);
}

:deep(.header-serve-list) {
    height: 36px;

    img {
        width: 24px;
        height: 24px;
        display: block;
    }

    span {
        display: inline-block;
        line-height: 1.5;
    }

    &:not(:last-child) {
        margin-bottom: 4px;
    }

    .ant-dropdown-menu-title-content {
        display: flex;
        align-items: center;
        gap: 10px;
    }
}

.audio-wrap {
    width: 100%;
    border-radius: 28px;
    background: rgba(134, 134, 134, 0.3);
    backdrop-filter: blur(34px);
    padding: 24px;
    gap: 8px;

    &.audio-mb-22 {
        margin-bottom: 22px;
    }

    :deep(.ant-input) {
        background-color: transparent;
        border-width: 0px;
        color: #d0d0d0;
        padding: 0;

        &:focus {
            box-shadow: 0 0 #0000;
        }
    }

    .audio-wrap-title {
        font-size: 14px;
        color: #929292;
        line-height: 20px;
        margin-bottom: 6px;
    }

    .audio-fanyi {
        height: 216px;
        color: #d0d0d0;
        overflow: auto;
    }

    .audio-btn {
        height: 32px;
        border-radius: 32px;
        font-size: 14px;
        padding: 4px 15px;
        outline: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        text-align: center;
        border: 1px solid transparent;
        cursor: pointer;
        user-select: none;
        touch-action: manipulation;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.85);
        font-family:
            -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
            'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        box-sizing: border-box;
        box-shadow: 0 0 #0000;
        background-color: #666666;

        &.audio-btn-active {
            background: linear-gradient(180deg, #ff555d 11.6%, #e22b35 100%);
        }

        &:not([disabled]):active,
        &:not([disabled]):hover {
            color: #fff;
            background-color: #535353;
        }

        &:focus-visible {
            outline: 2px solid #313131;
            outline-offset: 1px;
            transition:
                outline-offset 0s,
                outline 0s;
        }
    }
}

.filter-btn {
    background-color: #535353;
    border-color: #424242;
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.04);
    font-size: 18px;
    height: 36px;
    padding: 0px 36px;
    border-radius: 18px;
    line-height: 36px;
    outline: none;
    position: relative;
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    user-select: none;
    touch-action: manipulation;
    color: rgba(255, 255, 255, 0.85);
    font-family:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
</style>
